<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    {{--<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>--}}
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    {{--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--}}
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/js/bootstrap.min.js"></script>

    {{--<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table-locale-all.min.js"></script>--}}
    <link href="../js/bootstrap/bootstrap_table/bootstrap-table.css" rel="stylesheet">
    {{--<script src="../js/bootstrap/bootstrap_table/bootstrap-table.js"></script>--}}
    {{--<script src="../js/bootstrap/bootstrap_table/extensions/export/bootstrap-table-export.js"></script>--}}

    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>


    <script src="http://crm.imaohu.com/js/bootstrap/bootstrap-editable.js"></script>
    <link href="http://crm.imaohu.com/js/bootstrap/bootstrap-editable.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/click-edit-row/bootstrap-table-click-edit-row.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/click-edit-row/bootstrap-table-click-edit-row.min.js"></script>

    {{--<script src="../js/bootstrap/tableExport/libs/pdfmake/pdfmake.min.js"></script>--}}
    {{--<script src="../js/bootstrap/tableExport/libs/pdfmake/vfs_fonts.js"></script>--}}
    {{--<script type="text/javascript" src="../js/bootstrap/tableExport/libs/FileSaver/FileSaver.min.js"></script>--}}
    {{--<script type="text/javascript" src="../js/bootstrap/tableExport/libs/jsPDF/jspdf.min.js"></script>--}}
    {{--<script type="text/javascript" src="../js/bootstrap/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>--}}
    <script type="text/javascript" src="../js/bootstrap/tableExport/tableExport.js"></script>


    <title>html</title>
</head>
<body>
<div style="padding:20px">
    <form method="get" class="search">
        <div class="input-group" >
            <input name="username" type="text" class="form-control" placeholder="机器人id"  value="{{$username}}"/>
            <input class="btn btn-sm btn-primary" value="查询" type="submit">
            <a class='btn btn-sm btn-info' onclick='g.show("+row+")'>新增机器人</a>
        </div>
    </form>

    {{--<div id="toolbar" class="btn-group">--}}
        {{--<select class="form-control" id="sel_exportoption">--}}
            {{--<option value="">Export Basic</option>--}}
            {{--<option value="all">Export All</option>--}}
            {{--<option value="selected">Export Selected</option>--}}
        {{--</select>--}}
    {{--</div>--}}

    <table id="table"></table>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="h4 modal-title" id="myModalLabel">
                    </h4>
                </div>
                <form id="form_save">
                    <input type="hidden" name="username" id="username" value="" />
                    <div class="modal-body">
                        <div style="padding: 10px 100px 10px;">
                            <div class="input-group col-md-12">
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title"><span class="red">*</span>用户手机:</div>
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="用户手机">
                                </div>
    
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title"><span class="red">*</span>用户昵称:</div>
                                    <input type="text" class="form-control" id="nick" name="nick" placeholder="用户昵称">
                                </div>
    
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title">*用户头像:</div>
                                    <div class="input-group-logo">
                                        <p id="preview"><img class="preview-img" src=""/></p>
                                        <input type="hidden" id="avatar" name="avatar" value=""/>
                                        <div id="upload">
                                            <a class="btn btn-default " id="upload_btn" href="javascript:void(0)">
                                                <i class="glyphicon glyphicon-plus"></i>
                                                <span>选择文件</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
    
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title">邀请人数:</div>
                                    <input type="text" class="form-control" id="invite_num" name="invite_num"  placeholder="0">
                                </div>
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title">获得现金:</div>
                                    <input type="text" class="form-control" name="rmb" id="rmb" placeholder="0">
                                </div>
                                <div class="input-group form-group col-xs-12">
                                    <div class="input-group-addon input_title">邀请人数:</div>
                                    <input type="text" class="form-control" name="deposit" id="deposit" placeholder="0">
                                </div>
    
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" id="modal_save"
                            onclick="g.save()">确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
        var g ={};
        $(function () {
            var $table = $('#table').bootstrapTable({
                idField: 'username',
                uniqueId: "username",               //每一行的唯一标识，一般为主键列
                // toolbar: '#toolbar',                //工具按钮用哪个容器

                url: '/bootstrap?type=ajax&total={{$total}}&username={{$username}}',
                height: "900",
                undefinedText: "---",
                method: 'get',                      //请求方式（*）
                // toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

                sortable: true,                     //是否启用排序
                sortOrder: "desc",                   //排序方式

                pagination: true,                   //是否显示分页（*）
                //queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 15, 20],        //可供选择的每页的行数（*）

                //表格必需设置的属性
                showExport: true,                     //是否显示导出
                exportDataType: "all",              //basic', 'all', 'selected'.
                exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
                clickToSelect: true,
                columns: [{
                    field: 'username',
                    title: '用户ID',
                    align: 'center',
                    valign: 'middle',
                    checkbox:'true',
                }, {
                    field: 'nick',
                    title: '用户昵称',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'avatar',
                    title: '机器人头像',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'invite_num',
                    title: '邀请人数',
                    editable: {
                        type: 'text'
                    },
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'rmb',
                    title: '获得现金',
                    sortable: true,
                    order: 'desc',
                    editable: {
                        type: 'text',
                        mode: 'inline',
                    },
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'deposit',
                    title: '提现现金',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'remark',
                    title: '备注',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'dateline',
                    title: '修改时间',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'action',
                    title: '修改',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    align: 'center',
                    valign: 'middle',
                }, {
                    field: 'del',
                    title: '删除',
                    formatter: 'delFormatter',
                    events: 'delEvents',
                    align: 'center',
                    valign: 'middle',
                }]
            });

            $('[data-toggle="remarks"]').popover();
            $(document).on('all.bs.table', '#table', function (e, name, args) {
                $('[data-toggle="remarks"]').popover();
            });

            // $(document).on('post-body.bs.table', '#table', function () {
            //     var $search = $('#table').data('bootstrap.table')
            //         .$toolbar.find('.search input');
            //     $search.attr('placeholder', '兼职ID查询');
            // });

            $('#myModal').on('show.bs.modal', function (e) {
                var filed ='<?php echo json_encode($filed) ?>';
                filed = jQuery.parseJSON(filed);
                if(g.row.username){
                    $('#myModalLabel').html('机器人ID:'+g.row.username);
                }else{
                    $('#myModalLabel').html('新增机器人');
                }

                $('#username').val(g.row.username);
    
                var addr_details = ''
                $.each(filed,function (k,v) {
                    $('#'+k).val(g.row[k]);
                })
    
                $('#preview').html(g.row['field']);
            })

            $(document).on('editable-save.bs.table', '#table', function (e, field, row, old, $el) {
                var remark =   row.remark;
                var username       =   row.username;
                $.ajax({
                    url:"",
                    type:'post',
                    dataType:'json',
                    data:{
                        remark:remark,
                        username:username
                    },
                    success:function (res) {
                        if(res.code != 1){
                            alert(res.msg);
                            location.href = "";
                        }else{
                            /*					var $els = $table.find('.editable'),
                                                    next = $els.index($el) + 1;

                                                if (next >= $els.length) {
                                                    return;
                                                }*/
                        }
                    },
                    error:function () {
                        alert('连接服务器超时，请重试！')
                    }
                })
            });

            //2.初始化select的change事件
            // $("#sel_exportoption").change(function () {
            //     // $table.bootstrapTable('refreshOptions', {
            //     //     exportDataType: $(this).val()
            //     // });
            //
            //     $table.bootstrapTable('destroy');
            //     $table.bootstrapTable({
            //         exportDataType: $(this).val()
            //     });
            // });


        });

        // // 上传组件
        // var uploader = Qiniu.uploader({
        //     runtimes: 'html5,flash,html4',
        //     browse_button: 'upload_btn',
        //     uptoken_url: "http://wwjcrmt.loovee.com/crm/qiniu_upload_token",
        //     domain: 'http://wwjcrmt.loovee.com',   //bucket 域名，下载资源时用到，**必需**
        //     get_new_uptoken: false,
        //     container: 'upload',
        //     max_file_size: '100mb',
        //     flash_swf_url: '',
        //     max_retries: 0,
        //     dragdrop: true,
        //     drop_element: 'upload',
        //     chunk_size: '4mb',
        //     auto_start: true,
        //
        //     init: {
        //         'FilesAdded': function (up, files) {
        //             plupload.each(files, function (file) {
        //
        //             });
        //         },
        //         'BeforeUpload': function (up, file) {
        //             // 每个文件上传前,处理相关的事情
        //         },
        //         'UploadProgress': function (up, file) {
        //             // 每个文件上传时,处理相关的事情
        //         },
        //         'FileUploaded': function (up, file, info) {
        //             info = $.parseJSON(info);
        //             var fileid = info.hash + '.jpg';
        //             var html = '<img src="' + LV.img_down + info.key + '" class="preview-img" alt="" />';
        //             $('#preview').html(html);
        //             $('#avatar').val(fileid);
        //         },
        //         'Error': function (up, err, errTip) {
        //             //上传出错时,处理相关的事情
        //             layer.msg(errTip);
        //         },
        //         'UploadComplete': function () {
        //             //队列文件处理完毕后,处理相关的事情
        //         },
        //         'Key': function (up, file) {
        //
        //         }
        //     }
        // });
        //

        /**
         * 修改
         * @param value
         * @param row
         * @param index
         * @returns {string}
         */
        function actionFormatter(value,row,index) {
            console.log(row)
            row  = JSON.stringify(row);
            var html = "<a class='btn btn-primary' onclick='g.show("+row+")'>修改</a>&nbsp"
    
            return [
                html
            ].join('');
        }

        /**
         * 签到
         * @param value
         * @param row
         * @param index
         * @returns {string}
         */
        function delFormatter(value,row,index) {
            var username = row.username;
            var html = '<a class="btn btn-danger"  onclick="g.del('+username+')">删除</a>&nbsp';
            return [
                html
            ].join('');
        }
    
        g.del= function (username) {
            var html = '您确定删除机器人';
            layer.open({
                type:0,
                content:html,
                btn:['确定','取消'],
                yes:function () {
                    $.ajax({
                        url:'',
                        data:{username:username},
                        dateType:'json',
                        type:'post',
                        success:function (e) {
                            if(parseInt(e.code) == 1){
                                layer.msg(e.msg);
                                location.reload();
                            }else{
                                layer.msg(e.msg);
                            }
                        },
                        error:function () {
                            layer.msg('后台服务器出错');
                            layer.closeAll();
                        }
                    })
                }
            })
        }
    
        //保存
        g.save = function(){
            var data =  $('#form_save').serialize();
            $.ajax({
                url:'',
                data:data,
                dataType:'json',
                type:'post',
                success:function(data){
                    if(data.code==1){
                        layer.msg(data.msg, {time: 5000, icon:1});
                        window.location.reload();
                    }else{
                        layer.msg(data.msg, {time: 5000, icon:5});
                    }
                },
                error:function () {
                    layer.msg('连接服务器失败，请重试');
                }
            });
        };
    </script>

</body>
</html>